<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        .header {
            height: 48px;
            line-height: 48px;
            background-color: #e62442;
            color: #fff;
            text-align: center;
            font-size: 17px;
            position: relative;
        }
        .header .search_btn {
        	position: absolute;
        	right: 0;
        	top: 0;
        	bottom: 0;
        	display: -webkit-box;
        	-webkit-box-align: center;
        }
        .header .search_btn img {
			width: 18px;
			padding: 0 18px;
			display: block;
        }
        .nav {
            border-bottom: 1px solid #dfdfdf;
            background-color: #ffffff;
            margin-bottom: 6px;
            position: relative;
            padding: 0 6px;
        }
        .nav ul {
            overflow: hidden;
        }
        .nav ul li {
            width: 20%;
            height: 44px;
            line-height: 44px;
            float: left;
            color: #999;
            font-size: 14px;
            text-align: center;
        }
        .nav ul li.active {
            color: #333;
            font-weight: bold;
        }
        .nav .line_wrap {
            position: absolute;
            left: 6px;
            right: 6px;
            bottom: 0;
        }
        .nav .line_wrap .line {
            width: 20%;
            height: 3px;
            background-color: #e62442;
        }
    </style>
</head>
<body>

    <div class="nav">
        <ul>
            <li class="active" tapmode onclick="fnClick(0);">待确认</li>
            <li tapmode onclick="fnClick(1);">待取餐</li>
            <li tapmode onclick="fnClick(2);">配送中</li>
            <li tapmode onclick="fnClick(3);">已完成</li>
            <li tapmode onclick="fnClick(4);">已取消</li>
        </ul>
        <div class="line_wrap">
            <div class="line"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
    apiready = function(){
        height = api.pageParam.height;
        fnOpenOrderGroup();
        api.sendEvent({
            name: 'fronNavbarEvent',
            extra: {
            }
        });

        api.addEventListener({
            name: 'hiddenOrderGroup'
        }, function(ret, err) {
            if (ret) {
                api.setFrameGroupAttr({
                    name: 'sellerOrderFrame',
                    hidden: true
                });
            } 
        });

        api.addEventListener({
            name: 'showOrderGroup'
        }, function(ret, err) {
            if (ret) {
                fnOpenOrderGroup();
            }
        });

        //监听变化
        api.addEventListener({
            name: 'fnChangeGroupFrame'
        }, function(ret, err) {
            if (ret) {
                fnClick(ret.value.index_);
            }
        });

        api.addEventListener({
            name: 'orderChangeEvent'
        }, function(ret, err){
            if( ret ){
                fnClick(0);
            }
        });
    };

    function fnOpenOrderGroup() {
        api.openFrameGroup({
            name: 'sellerOrderFrame',
            rect: {
                 x: 0, 
                 y: height + $('.nav').height(), 
                 w: 'auto',
                 h: api.winHeight - height - $('.nav').height() - 50
            },
            scrollEnabled: true,
            frames: [{
                name: 'unconfirmed_order_frame', 
                url: 'unconfirmed_order_frame.html',
                bounces: true,
                pageParam : {
                    order_status : 1
                }
            },{
                name: 'no_meal_order_frame', 
                url: 'no_meal_order_frame.html',
                bounces: true,
                pageParam : {
                    order_status:'2,3',
                }
            },{
                name: 'distribution_order_frame', 
                url: 'distribution_order_frame.html',
                bounces: true,
                pageParam : {
                    order_status : 4
                }
            },{
                name: 'completed_order_frame', 
                url: 'completed_order_frame.html',
                bounces: true,
                pageParam : {
                    order_status: '5,6'
                }
            },{
                name: 'canceled_order_frame', 
                url: 'canceled_order_frame.html',
                bounces: true,
                pageParam : {
                    order_status : 'refund'
                }
            }]
        }, function(ret, err) {
            if (ret) {
                fnChange(ret.index);
            } 
        });
    }
    function fnClick(_index) {
        fnChange(_index);
        api.setFrameGroupIndex({
            name: 'sellerOrderFrame',
            index: _index,
        });
    }

    function fnChange(_index) {
        if (!isNaN(_index)) {
            this_ = $('.nav ul li').eq(_index);
        }
        $('.nav ul li').removeClass('active');
        $(this_).addClass('active');
        var left = $('.line').width() * _index;
        $('.line').css({
            'transform': 'translateX(' + left + 'px)',
            '-webkit-transform': 'translateX(' + left + 'px)',
            'transition': 'transform 300ms ease-in-out',
            '-webkit-transition': '-webkit-transform 300ms ease-in-out',
        });
    }


</script>
</html>